<template>
  <div>
    <h2>计算属性</h2>
    <!-- 计算属性，必须当做属性来使用，不能当做方法来调用，不能加小括号 -->
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>



    <h2>使用方法</h2>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>

  </div>
</template>

<script>
export default {
data:() =>({
    xing:'张',
    ming:'三'
}),
// 计算属性，要写到和data 平级的computcd 中
computed:{
  // 所有的计算属性，都放到这里 (计算属性 必须返回计算的结果)
  fullName(){
    console.log('方法每调用');
   return this.xing + this.ming
  }
},
 methods: {
    getName(){
      console.log('方法被调用了');
      return this.xing + this.ming
    }
  }
}
</script>

<style>

</style>